<template>
	<div class="wrapper">
		<!-- 顶部应用栏 -->
		<header class="mdc-top-app-bar">
			<div class="mdc-top-app-bar__row">
				<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
					<button class="mdc-button mdc-button--text back-btn" @click="goBack">
						<i class="material-icons">arrow_back</i>
					</button>
					<h1 class="mdc-top-app-bar__title">新增送货地址</h1>
				</section>
			</div>
		</header>

		<!-- 主要内容区域 -->
		<div class="main-content">
			<div class="address-container">
				<div class="address-card">
					<div class="address-header">
						<div class="address-icon">
							<i class="material-icons">add_location</i>
						</div>
						<h2>新增收货地址</h2>
						<p>请填写以下信息</p>
					</div>

					<div class="address-form">
						<!-- 表单部分 -->
						<ul class="form-box">
							<li>
								<div class="input-group">
									<div class="input-field">
										<i class="material-icons">person</i>
										<input type="text" v-model="deliveryAddress.contactName" placeholder="联系人姓名">
									</div>
								</div>
							</li>
							<li>
								<div class="input-group">
									<div class="input-field">
										<i class="material-icons">wc</i>
										<div class="radio-group">
											<label class="radio-option">
												<input type="radio" v-model="deliveryAddress.contactSex" value="1">
												<span>男</span>
											</label>
											<label class="radio-option">
												<input type="radio" v-model="deliveryAddress.contactSex" value="0">
												<span>女</span>
											</label>
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="input-group">
									<div class="input-field">
										<i class="material-icons">phone</i>
										<input type="tel" v-model="deliveryAddress.contactTel" placeholder="联系电话">
									</div>
								</div>
							</li>
							<li>
								<div class="input-group">
									<div class="input-field">
										<i class="material-icons">location_on</i>
										<input type="text" v-model="deliveryAddress.address" placeholder="收货地址">
									</div>
								</div>
							</li>
						</ul>

						<button 
							type="button" 
							class="mdc-button mdc-button--raised save-btn"
							@click="addUserAddress"
							:disabled="loading"
						>
							<i class="material-icons" v-if="!loading">save</i>
							<i class="material-icons loading-icon" v-else>refresh</i>
							<span class="mdc-button__label">{{ loading ? '保存中...' : '保存' }}</span>
						</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 底部菜单部分 -->
		<AppFooter></AppFooter>
	</div>
</template>

<script>
	import AppFooter from '../components/AppFooter.vue';
	
	export default {
		name: 'AddUserAddress',
		data() {
			return {
				businessId:this.$route.query.businessId,
				user:{},
				deliveryAddress:{
					contactName:'',
					contactSex:1,
					contactTel:'',
					address:''
				},
				loading: false
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');
		},
		components: {
			AppFooter
		},
		methods: {
			goBack() {
				this.$router.go(-1);
			},
			addUserAddress(){
				if(this.deliveryAddress.contactName==''){
					this.$toast?.error('联系人姓名不能为空！');
					return;
				}
				if(this.deliveryAddress.contactTel==''){
					this.$toast?.error('联系人电话不能为空！');
					return;
				}
				if(this.deliveryAddress.address==''){
					this.$toast?.error('收货地址不能为空！');
					return;
				}

				this.loading = true;
				this.deliveryAddress.userId = this.user.userId;
				this.$axios.post('DeliveryAddressController/saveDeliveryAddress', this.$qs.stringify(
					this.deliveryAddress
				)).then(response => {
					if(response.data>0){
						this.$toast?.success('地址添加成功！');
						setTimeout(() => {
							this.$router.push({path:'/userAddress',
								query:{businessId:this.businessId,
								foodArr:this.$route.query.foodArr
							}});
						}, 1500);
					}else{
						this.$toast?.error('新增地址失败！');
					}
				}).catch(error => {
					console.error(error);
					this.$toast?.error('新增地址失败，请稍后重试！');
				}).finally(() => {
					this.loading = false;
				});
			}
		}
	}
</script>

<style scoped>
	/* 重置样式 */
	* {
		box-sizing: border-box;
	}

	.wrapper {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 顶部应用栏 */
	.mdc-top-app-bar {
		background-color: #1976D2;
		color: white;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.mdc-top-app-bar__row {
		display: flex;
		align-items: center;
		height: 72px;
		padding: 0 20px;
	}

	.mdc-top-app-bar__section {
		display: flex;
		align-items: center;
		gap: 16px;
		flex-direction: row;
	}

	.mdc-top-app-bar__title {
		font-size: 22px;
		font-weight: 500;
		margin: 0;
		white-space: nowrap;
		line-height: 1;
	}

	.back-btn {
		background: none;
		border: none;
		color: white;
		padding: 20px;
		cursor: pointer;
		border-radius: 50%;
		transition: all 0.2s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateY(3px);
	}

	.back-btn:hover {
		background-color: rgba(255, 255, 255, 0.15);
		transform: translateY(8px) scale(1.05);
	}

	.back-btn .material-icons {
		font-size: 28px;
	}

	/* 主要内容区域 */
	.main-content {
		padding: 20px 16px;
		padding-bottom: 120px;
	}

	.address-container {
		max-width: 500px;
		margin: 0 auto;
	}

	.address-card {
		background-color: white;
		border-radius: 16px;
		box-shadow: 0 4px 20px rgba(0,0,0,0.1);
		overflow: hidden;
	}

	.address-header {
		background: linear-gradient(135deg, #1976D2 0%, #42A5F5 100%);
		color: white;
		padding: 32px 24px;
		text-align: center;
	}

	.address-icon {
		margin-bottom: 16px;
	}

	.address-icon .material-icons {
		font-size: 64px;
		opacity: 0.9;
	}

	.address-header h2 {
		font-size: 28px;
		font-weight: 300;
		margin: 0 0 8px 0;
	}

	.address-header p {
		font-size: 16px;
		opacity: 0.9;
		margin: 0;
	}

	.address-form {
		padding: 32px 24px;
	}

	.form-box {
		list-style: none;
		padding: 0;
		margin: 0 0 24px 0;
	}

	.form-box li {
		margin-bottom: 20px;
	}

	.input-group {
		margin-bottom: 0;
	}

	.input-field {
		position: relative;
		display: flex;
		align-items: center;
		background-color: #f8f9fa;
		border: 2px solid #e9ecef;
		border-radius: 12px;
		padding: 0 16px;
		transition: all 0.3s ease;
		min-height: 56px;
	}

	.input-field:focus-within {
		border-color: #1976D2;
		background-color: white;
		box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
	}

	.input-field .material-icons {
		color: #666;
		margin-right: 12px;
		font-size: 20px;
		flex-shrink: 0;
	}

	.input-field input {
		flex: 1;
		border: none;
		outline: none;
		background: transparent;
		padding: 16px 0;
		font-size: 16px;
		color: #333;
	}

	.input-field input::placeholder {
		color: #999;
	}

	.radio-group {
		display: flex;
		gap: 24px;
		align-items: center;
		flex: 1;
	}

	.radio-option {
		display: flex;
		align-items: center;
		gap: 8px;
		cursor: pointer;
		font-size: 16px;
		color: #333;
	}

	.radio-option input[type="radio"] {
		width: 20px;
		height: 20px;
		margin: 0;
		cursor: pointer;
		accent-color: #1976D2;
	}

	/* 按钮样式 */
	.mdc-button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 16px 24px;
		border-radius: 12px;
		font-size: 16px;
		font-weight: 500;
		text-transform: none;
		transition: all 0.3s ease;
		cursor: pointer;
		border: none;
		width: 100%;
		margin-bottom: 16px;
	}

	.mdc-button--raised {
		background-color: #1976D2;
		color: white;
		box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
	}

	.mdc-button--raised:hover:not(:disabled) {
		background-color: #1565C0;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4);
	}

	.mdc-button:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.mdc-button .material-icons {
		font-size: 20px;
	}

	.loading-icon {
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}

	.mdc-button__label {
		font-weight: 500;
	}

	/* 响应式设计 */
	@media (max-width: 600px) {
		.main-content {
			padding: 16px 12px;
		}
		
		.address-header {
			padding: 24px 20px;
		}
		
		.address-form {
			padding: 24px 20px;
		}
		
		.address-header h2 {
			font-size: 24px;
		}
		
		.address-icon .material-icons {
			font-size: 56px;
		}
	}
</style>
